html, body {
    height: 100%;
    overflow: hidden;
}

.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.error-page h1 {
    font-size: 30vh;
    font-weight: bold;
    position: relative;
    margin: -8vh 0 0;
    padding: 0;
}
.error-page h1:after {
    content: attr(data-h1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: transparent;
    /* webkit only for graceful degradation to IE */
    background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ce, #9b59b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 400%;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);
    animation: animateTextBackground 10s ease-in-out infinite;
}
.error-page h1 + p {
    color: #d6d6d6;
    font-size: 8vh;
    font-weight: bold;
    line-height: 10vh;
    max-width: 600px;
    position: relative;
}
.error-page h1 + p:after {
    content: attr(data-p);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: transparent;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
}

#particles-js {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

@keyframes animateTextBackground {
    0% {
        background-position: 0 0;
    }
    25% {
        background-position: 100% 0;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0 100%;
    }
    100% {
        background-position: 0 0;
    }
}
@media (max-width: 767px) {
    .error-page h1 {
        font-size: 32vw;
    }
    .error-page h1 + p {
        font-size: 8vw;
        line-height: 10vw;
        max-width: 70vw;
    }
}
a.back {
    position: fixed;
    right: 40px;
    bottom: 40px;
    background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176);
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    padding: 15px 30px;
    text-decoration: none;
    transition: 0.25s all ease-in-out;
}
a.back:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
@-webkit-keyframes grow {
  from {
    top: 15em;
  }
  to {
    top: 1em;
    opacity: 1;
  }
}
@-moz-keyframes grow {
  from {
    top: 15em;
  }
  to {
    top: 1em;
    opacity: 1;
  }
}
@-ms-keyframes grow {
  from {
    top: 15em;
  }
  to {
    top: 1em;
    opacity: 1;
  }
}
@keyframes grow {
  from {
    top: 15em;
  }
  to {
    top: 1em;
    opacity: 1;
  }
}
@-webkit-keyframes turn-right {
  from {
    transform: rotateY(-140deg);
    -moz-transform: rotateY(-140deg);
    -webkit-transform: rotateY(-140deg);
    -o-transform: rotateY(-140deg);
  }
  to {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
  }
}
@-moz-keyframes turn-right {
  from {
    transform: rotateY(-140deg);
    -moz-transform: rotateY(-140deg);
    -webkit-transform: rotateY(-140deg);
    -o-transform: rotateY(-140deg);
  }
  to {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
  }
}
@-ms-keyframes turn-right {
  from {
    transform: rotateY(-140deg);
    -moz-transform: rotateY(-140deg);
    -webkit-transform: rotateY(-140deg);
    -o-transform: rotateY(-140deg);
  }
  to {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
  }
}
@keyframes turn-right {
  from {
    transform: rotateY(-140deg);
    -moz-transform: rotateY(-140deg);
    -webkit-transform: rotateY(-140deg);
    -o-transform: rotateY(-140deg);
  }
  to {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
  }
}
@-webkit-keyframes turn-left {
  from {
    transform: rotateY(140deg);
    -moz-transform: rotateY(140deg);
    -webkit-transform: rotateY(140deg);
    -o-transform: rotateY(140deg);
  }
  to {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
  }
}
@-moz-keyframes turn-left {
  from {
    transform: rotateY(140deg);
    -moz-transform: rotateY(140deg);
    -webkit-transform: rotateY(140deg);
    -o-transform: rotateY(140deg);
  }
  to {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
  }
}
@-ms-keyframes turn-left {
  from {
    transform: rotateY(140deg);
    -moz-transform: rotateY(140deg);
    -webkit-transform: rotateY(140deg);
    -o-transform: rotateY(140deg);
  }
  to {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
  }
}
@keyframes turn-left {
  from {
    transform: rotateY(140deg);
    -moz-transform: rotateY(140deg);
    -webkit-transform: rotateY(140deg);
    -o-transform: rotateY(140deg);
  }
  to {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
  }
}
body {
  padding: 3em;
  background: #d2d2b4;
}

.flower {
  -moz-animation-name: grow;
  -webkit-animation-name: grow;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 4s;
  -webkit-animation-duration: 4s;
  top: 1em;
  position: absolute;
  z-index: 10;
}
.flower span {
  background: #b4d28c;
  width: .5em;
  z-index: 5;
  height: 50em;
  display: block;
  position: absolute;
}
.flower span:after {
  content: '';
  transform: rotateY(-140deg);
  -moz-transform: rotateY(-140deg);
  -webkit-transform: rotateY(-140deg);
  -o-transform: rotateY(-140deg);
  -moz-transform-origin: left;
  -webkit-transform-origin: left;
  width: 3em;
  height: 3em;
  display: block;
  background: #a8cb7a;
  border-radius: 2em 0em 2em 0em;
  box-shadow: 0 0 0 0.2em #a1c76f inset;
  z-index: 0;
  top: 1em;
  left: .5em;
  position: absolute;
}
.flower span:before {
  transform: rotateY(140deg);
  -moz-transform: rotateY(140deg);
  -webkit-transform: rotateY(140deg);
  -o-transform: rotateY(140deg);
  -moz-transform-origin: right;
  -webkit-transform-origin: right;
  -moz-animation-name: turn-left;
  -webkit-animation-name: turn-left;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -moz-animation-duration: 4s;
  -webkit-animation-duration: 4s;
  content: '';
  width: 3em;
  height: 3em;
  display: block;
  background: #a3c872;
  border-radius: 0em 2em 0em 2em;
  box-shadow: 0 0 0 0.2em #a1c76f inset;
  z-index: 0;
  position: absolute;
  left: -3em;
  top: 5em;
}

html:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2em;
  background: #c7c7a1;
}

.flower-0 {
  height: 4em;
  width: 4em;
  opacity: 0;
  margin-top: 6em;
  background-color: #F3F875;
  border-radius: 20em;
  border: 1em solid #F8C475;
  box-shadow: 0 0 0 0.2em #f7bc62, 0 0 0 0.2em #f5f988 inset;
}
.flower-0 span {
  top: 5.2em;
  left: 1.73913em;
}
.flower-0 span:before {
  display: block;
}
.flower-0 span:after {
  display: none;
}

.flower-1 {
  height: 6em;
  width: 6em;
  opacity: 0;
  margin-top: 1em;
  background-color: #a6d6fa;
  border-radius: 30em;
  border: 1em solid #75BFF8;
  box-shadow: 0 0 0 0.2em #62b6f7, 0 0 0 0.2em #b9dffb inset;
}
.flower-1 span {
  top: 7.2em;
  left: 2.6087em;
}
.flower-1 span:before {
  display: block;
}
.flower-1 span:after {
  display: block;
}

.flower-2 {
  height: 3em;
  width: 3em;
  opacity: 0;
  margin-top: 0em;
  background-color: #F8C475;
  border-radius: 15em;
  border: 1.2em solid #F87575;
  box-shadow: 0 0 0 0.2em #f76262, 0 0 0 0.2em #f9cc88 inset;
}
.flower-2 span {
  top: 4.4em;
  left: 1.30435em;
}
.flower-2 span:before {
  display: none;
}
.flower-2 span:after {
  display: none;
}

.flower-3 {
  height: 2em;
  width: 2em;
  opacity: 0;
  margin-top: 3em;
  background-color: #F87575;
  border-radius: 10em;
  border: 3em solid #F8C475;
  box-shadow: 0 0 0 0.2em #f7bc62, 0 0 0 0.2em #f98888 inset;
}
.flower-3 span {
  top: 5.2em;
  left: 0.86957em;
}
.flower-3 span:before {
  display: block;
}
.flower-3 span:after {
  display: none;
}

.flower-4 {
  height: 3em;
  width: 3em;
  opacity: 0;
  margin-top: 0em;
  background-color: #75BFF8;
  border-radius: 15em;
  border: 1.2em solid #a6d6fa;
  box-shadow: 0 0 0 0.2em #92cdf9, 0 0 0 0.2em #88c8f9 inset;
}
.flower-4 span {
  top: 4.4em;
  left: 1.30435em;
}
.flower-4 span:before {
  display: block;
}
.flower-4 span:after {
  display: none;
}

.flower-5 {
  height: 4em;
  width: 4em;
  opacity: 0;
  margin-top: 2em;
  background-color: #D9ABFF;
  border-radius: 20em;
  border: 0.7em solid #FF89B3;
  box-shadow: 0 0 0 0.2em #ff75a6, 0 0 0 0.2em #e2bfff inset;
}
.flower-5 span {
  top: 4.9em;
  left: 1.73913em;
}
.flower-5 span:before {
  display: block;
}
.flower-5 span:after {
  display: block;
}

.flower-6 {
  height: 5em;
  width: 5em;
  opacity: 0;
  margin-top: 7em;
  background-color: #F87575;
  border-radius: 25em;
  border: 1.2em solid #F8C475;
  box-shadow: 0 0 0 0.2em #f7bc62, 0 0 0 0.2em #f98888 inset;
}
.flower-6 span {
  top: 6.4em;
  left: 2.17391em;
}
.flower-6 span:before {
  display: block;
}
.flower-6 span:after {
  display: block;
}

.flower-0 {
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  left: 1em;
}
.flower-0 span:before {
  -moz-animation-name: turn-right;
  -webkit-animation-name: turn-right;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
}
.flower-0 span:after {
  -moz-animation-name: turn-left;
  -webkit-animation-name: turn-left;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
}

.flower-1 {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  left: 11em;
}
.flower-1 span:before {
  -moz-animation-name: turn-right;
  -webkit-animation-name: turn-right;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
}
.flower-1 span:after {
  -moz-animation-name: turn-left;
  -webkit-animation-name: turn-left;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
}

.flower-2 {
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  left: 21em;
}
.flower-2 span:before {
  -moz-animation-name: turn-right;
  -webkit-animation-name: turn-right;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
}
.flower-2 span:after {
  -moz-animation-name: turn-left;
  -webkit-animation-name: turn-left;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
}

.flower-3 {
  -moz-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
  left: 31em;
}
.flower-3 span:before {
  -moz-animation-name: turn-right;
  -webkit-animation-name: turn-right;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
}
.flower-3 span:after {
  -moz-animation-name: turn-left;
  -webkit-animation-name: turn-left;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
}

.flower-4 {
  -moz-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  left: 41em;
}
.flower-4 span:before {
  -moz-animation-name: turn-right;
  -webkit-animation-name: turn-right;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
}
.flower-4 span:after {
  -moz-animation-name: turn-left;
  -webkit-animation-name: turn-left;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
}

.flower-5 {
  -moz-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  left: 51em;
}
.flower-5 span:before {
  -moz-animation-name: turn-right;
  -webkit-animation-name: turn-right;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
}
.flower-5 span:after {
  -moz-animation-name: turn-left;
  -webkit-animation-name: turn-left;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
}

.flower-6 {
  -moz-animation-delay: 1.8s;
  -webkit-animation-delay: 1.8s;
  -moz-animation-delay: 1.8s;
  left: 61em;
}
.flower-6 span:before {
  -moz-animation-name: turn-right;
  -webkit-animation-name: turn-right;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 1.8s;
  -moz-animation-delay: 1.8s;
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
}
.flower-6 span:after {
  -moz-animation-name: turn-left;
  -webkit-animation-name: turn-left;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-delay: 2.4s;
  -moz-animation-delay: 2.4s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
}